<template>
  <div>
    <a-page-header title="查询表格" :ghost="false" sub-title="查询表格" />
    <a-card class="mt-1" size="small">
      <div class="mb-1">
        <a-button type="primary" size="small">
          <template #icon><icon name="ImportOutlined" /> </template>
          导入订单
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        size="middle"
        rowKey="id"
      >
        <template #status="{ record }">
          {{ record.status == 1 ? '已导入' : '未导入' }}
        </template>
        <template #price="{ record }"> ￥ {{ record.price }} </template>
        <template #operation="{ record }">
          <a-button-group size="small">
            <a-button type="primary" @click="view(record)">
              <template #icon>
                <icon name="EyeOutlined" />
              </template>
            </a-button>
          </a-button-group>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue';
import {
  Empty,
  Card,
  Col,
  Row,
  PageHeader,
  Table,
  Button,
} from 'ant-design-vue';
import { Icon } from '@/components';
import { JDOrder } from '@/types';
import axios from '@/util/axios';

const columns = [
  {
    title: '订单编号',
    dataIndex: 'id',
  },
  {
    title: '月号',
    dataIndex: 'start_month_code',
  },
  {
    title: '版本',
    dataIndex: 'version',
  },
  {
    title: '长度',
    dataIndex: 'length',
  },
  {
    title: '价格',
    dataIndex: 'price',
    slots: { customRender: 'price' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    slots: { customRender: 'status' },
  },
  {
    title: '对接时间',
    dataIndex: 'processed_at',
  },
  {
    title: '收货人',
    dataIndex: 'user',
  },
  {
    title: '联系电话',
    dataIndex: 'cellphone',
  },
  {
    title: '类型',
    width: '80px',
    align: 'center',
    dataIndex: 'type',
  },
  {
    title: '操作',
    width: '80px',
    align: 'center',
    slots: { customRender: 'operation' },
  },
];

export default defineComponent({
  components: {
    AEmpty: Empty,
    ACard: Card,
    ACol: Col,
    ARow: Row,
    APageHeader: PageHeader,
    ATable: Table,
    AButton: Button,
    AButtonGroup: Button.Group,
    Icon,
  },
  setup() {
    const loading = ref(true);
    const data: Ref<JDOrder[]> = ref([]);
    const pagination = reactive({});
    onMounted(async () => {
      const res = await axios.get('orders');
      if (res != undefined && res.status == 200) {
        data.value = res.data;
      }
      loading.value = false;
    });

    const view = (row: JDOrder) => {
      console.log(row);
    };

    return {
      columns,
      data,
      loading,
      view,
      pagination,
    };
  },
});
</script>

<style lang="less" scoped>
</style>
